<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>护萌宝</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="css/mui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/mui.picker.css">
    <link rel="stylesheet" href="css/mui.poppicker.css">
</head>
<body>
<script src="js/vue.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script src="js/mui.poppicker.js"></script>
<script type="text/javascript" charset="utf-8">
    mui.init();
</script>


<div id="app">
    <header class="mui-bar mui-bar-nav">
        <a @click="onCancel" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">护萌宝 添加任务</h1>
    </header>
    <div class="mui-content">
        <div class="mui-card">
            <div class="mui-card-header">
                类型
                <div class="mui-input-row mui-input-range">
                    <label>{{Array("", "出征", "战役", "演习")[config_type_value]}}</label>
                    <input v-model="config_type_value" type="range" min="1" max="3">
                </div>
            </div>

            <div class="mui-input-group mui-card-content" v-show="config_type_value == 1">
                <div class="mui-input-row">
                    <label>配置名称:</label>
                    <input @click="onConfigClick" v-model="config_name" type="text" placeholder="点击选择配置" readonly>
                </div>
                <div class="mui-input-row">
                    <label>执行次数</label>
                    <input type="number" v-model="config_num" class="mui-input-clear" placeholder="请输入执行次数">
                </div>
                <div class="mui-input-row">
                    <label>队伍</label>
                    <input type="text" v-model="fleet" @click="onFleetClick" placeholder="请选择队伍" readonly>
                </div>
                <div class="mui-input-row">
                    <label>修理方式</label>
                    <input @click="onRepairClick" type="text" v-model="repair" placeholder="请输入执行次数" readonly>
                </div>
            </div>

            <div class="mui-input-group mui-card-content" v-show="config_type_value == 2">
                <div class="mui-input-row">
                    <label>地图:</label>
                    <input @click="onCampaignMapClick" v-model="map" type="text" placeholder="点击选择配置" readonly>
                </div>
                <div class="mui-input-row">
                    <label>阵形</label>
                    <input @click="onFormatClick" type="text" v-model="format" placeholder="请选择阵形" readonly>
                </div>
                <div class="mui-input-row">
                    <label>修理方式</label>
                    <input @click="onRepairClick" type="text" v-model="repair" placeholder="请输入执行次数" readonly>
                </div>
                <div class="mui-input-row">
                    <label>无限SL</label>
                    <input type="number" v-model="campaign_sl" class="mui-input-clear" placeholder="不输入则不开启">
                </div>
                <div class="mui-input-row">
                    <label>夜战</label>
                    <div id="campaign_night" class="mui-switch">
                        <div class="mui-switch-handle"></div>
                    </div>
                </div>
            </div>

            <div class="mui-input-group mui-card-content" v-show="config_type_value == 3">
                <div class="mui-input-row">
                    <label>队伍</label>
                    <input type="text" v-model="fleet" @click="onFleetClick" placeholder="请选择队伍" readonly>
                </div>
                <div class="mui-input-row">
                    <label>阵形</label>
                    <input @click="onFormatClick" type="text" v-model="format" placeholder="请选择阵形" readonly>
                </div>
                <div class="mui-input-row">
                    <label>夜战</label>
                    <div id="pvp_night" class="mui-switch">
                        <div class="mui-switch-handle"></div>
                    </div>
                </div>
            </div>


            <div class="mui-card-footer">
                <a @click="onCancel" class="mui-card-link">取消</a>
                <a @click="onSubmit" class="mui-card-link">提交</a>
            </div>
        </div>


    </div>
</div>
<script type="text/javascript" charset="utf-8">
    var app = new Vue({
        el: "#app",
        data: {
            config_type_value: 1,
            config_type: ["", "battle", "campaign", "pvp"],
            config_list: ["测试"],
            config_name: "",
            config_num: "500",
            config_format: 1,

            config_repair_value: 0,
            config_fleet_value: 1,

            campaign_map_name: {
                '101': '驱逐简单战役',
                '102': '驱逐困难战役',
                '201': '巡洋简单战役',
                '202': '巡洋困难战役',
                '301': '战列简单战役',
                '302': '战列困难战役',
                '401': '航母简单战役',
                '402': '航母困难战役',
                '501': '潜艇简单战役',
                '502': '潜艇困难战役'
            },
            campaign_name_value: '101',
            campaign_sl: "",


        },
        computed: {
            fleet: function () {
                return ["", "一队", "二队", "三队", "四队"][this.config_fleet_value]
            },
            repair: function () {
                return ["中破快修", "大破快修", "中破停止", "大破停止"][this.config_repair_value]
            },
            map: function () {
                return this.campaign_map_name[this.campaign_name_value];
            },
            format: function () {
                return ["", "单纵", "复纵", "轮型", "梯形", "单横"][this.config_format]
            }

        },
        methods: {
            onConfigClick: function () {
                var picker = new mui.PopPicker();
                var l = [];
                for (var d in app.config_list) {
                    if (app.config_list.hasOwnProperty(d)) {
                        l.push({value: app.config_list[d], text: app.config_list[d]});
                    }
                }
                picker.setData(l);
                picker.show(function (e) {
                    app.config_name = e[0]["value"];
                });
            },
            onRepairClick: function () {
                var config_repair = ["中破快修", "大破快修", "中破停止", "大破停止"];
                var picker = new mui.PopPicker();
                var l = [];
                for (var d in config_repair) {
                    if (config_repair.hasOwnProperty(d)) {
                        l.push({value: d, text: config_repair[d]});
                    }
                }
                picker.setData(l);
                picker.show(function (e) {
                    app.config_repair_value = e[0]["value"];
                });
            },

            onFleetClick: function () {
                var config_fleet = ["", "一队", "二队", "三队", "四队"];
                var picker = new mui.PopPicker();
                var l = [];
                for (var i = 1; i <= 4; i++) {
                    l.push({value: i, text: config_fleet[i]});
                }
                picker.setData(l);
                picker.show(function (e) {
                    app.config_fleet_value = e[0]["value"];
                });
            },

            onCampaignMapClick: function () {
                var picker = new mui.PopPicker();
                var l = [];
                for (var d in app.campaign_map_name) {
                    if (app.campaign_map_name.hasOwnProperty(d)) {
                        l.push({value: d, text: app.campaign_map_name[d]});
                    }
                }
                picker.setData(l);
                picker.show(function (e) {
                    app.campaign_name_value = e[0]["value"];
                });
            },

            onFormatClick: function () {
                var picker = new mui.PopPicker();
                var l = [{value: 1, text: "单纵"}, {value: 2, text: "复纵"}, {value: 3, text: "轮型"}, {
                    value: 4,
                    text: "梯形"
                }, {value: 5, text: "单横"}];
                picker.setData(l);
                picker.show(function (e) {
                    app.config_format = e[0]["value"];
                });
            },
            onSubmit: function () {
                var obj = {};
                if (app.config_type_value == 1) {
                    if (app.config_name.length === 0) {
                        mui.alert('您没有选择配置', '错误', '返回', function (e) {
                        }, 'div');
                        return;
                    }
                    obj.name = app.config_name;
                    obj.type = "battle";
                    obj.num = 0;
                    obj.num_max = Number.parseInt(app.config_num);
                    obj.locked = "-1";
                    obj.battleData = {
                        repair: app.config_repair_value,
                        fleet: app.config_fleet_value
                    };
                } else if (app.config_type_value == 3) {
                    obj.name = "演习";
                    obj.type = "pvp";
                    obj.num = 0;
                    obj.num_max = 1;
                    obj.locked = "-1";
                    obj.pvpData = {
                        format: app.config_format,
                        repair: app.config_repair_value,
                        fleet: app.config_fleet_value,
                        night: document.getElementById("pvp_night").classList.contains("mui-active")
                    };

                } else if (app.config_type_value == 2) {
                    obj.name = app.campaign_map_name[app.campaign_name_value];
                    obj.type = "campaign";
                    obj.num = 0;
                    obj.num_max = app.campaign_sl || 1;
                    obj.locked = "-1";
                    obj.campaignData = {
                        campaignMap: app.campaign_name_value,
                        format: app.config_format,
                        repair: app.config_repair_value,
                        sl: app.campaign_sl,
                        night: document.getElementById("pvp_night").classList.contains("mui-active")
                    };
                }

                onFinish(obj);
            },
            onCancel: function () {
                onCancel();
            }


        }
    });

    var onLoad = function (str) {
        if (str) {
            app.config_list = JSON.parse(str).sort();
        }
    };

    var onFinish = function (obj) {
        var str = JSON.stringify(obj);
        console.log("提交数据" + str);
        window.android && window.android.onFinish(str);
    };

    var onCancel = function () {
        console.log("用户取消操作");
        window.android && window.android.onCancel();
    };


</script>

</body>
</html>
